<template>

  <div class="container">
   <category title="美食">
     <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
   </category>
   <category title="游戏">
     <ul slot="center">
       <li v-for="(game,index) in games" :key="index">{{game}}</li>
     </ul>
     <div class="foot" slot="footer">
       <a href="#">单机游戏</a>
       <a href="#">网络游戏</a>
     </div>
   </category>
   <category title="电影">
     <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
     <template v-slot:footer>
       <div class="foot">
         <a href="#">经典</a>
         <a href="#">热门</a>
         <a href="#">推荐</a>
       </div>
       <h4>欢迎前来观影</h4>
     </template>
   </category>
  </div>

</template>

<script>
import category from './components/Category.vue'
export default {
  name: "App",
  components:{category},
  data() {
    return {
      foods:['烧烤','火锅','小龙虾','牛排'],
      games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
      films:['拆弹专家','变形金刚','死侍','生化危机']
    }
  }, 
};
</script>

<style>
/*base*/
.container,.foot {
  display: flex;
  justify-content: space-around;
}
h4 {
  text-align: center;
}
</style>